<template>
  <div style="height: 88%;overflow-y: auto">
    <a-popover :visible="popoverVisibleAdvice" @visibleChange="visibleChangeAdvice" autoAdjustOverflow trigger="click" placement="bottomLeft">
      <template slot="content">
        <div style="width:1050px;">
          <a-spin :spinning="spinning">
            <a-tabs :activeKey="currentAdciveActiveKey" @change="changeTabsDoctorAdvice" type="line" :tabBarStyle="{borderBottom:'none'}" >
              <a-tab-pane :key="1" tab="常用医嘱列表">
                <a-table
                  :pagination="pagination"
                  style="margin-top: 15px;"
                  size="small"
                  :columns="commonlyDoctorAdviceTableColumns"
                  :data-source="commonlyDoctorAdviceTableData"
                  :rowKey="(record,index)=> index"
                  @change="handleTableChange"
                  :customRow="clickRow"
                >
                </a-table>
              </a-tab-pane>
              <a-tab-pane :key="2" tab="医嘱列表" >
                <a-table
                  :pagination="pagination"
                  style="margin-top: 15px;"
                  size="small"
                  :columns="DoctorAdviceAndDrugsTableColumns"
                  :data-source="DoctorAdviceTableData"
                  :rowKey="(record,index)=> index"
                  @change="handleTableChange"
                  :customRow="clickRow"
                >
                </a-table>
              </a-tab-pane>
              <a-tab-pane :key="3" tab="药物列表">
                <a-table
                  :pagination="pagination"
                  style="margin-top: 15px;"
                  size="small"
                  :columns="DoctorAdviceAndDrugsTableColumns"
                  :data-source="DrugsTableData"
                  :rowKey="(record,index)=> index"
                  @change="handleTableChange"
                  :customRow="clickRow"
                >
                </a-table>
              </a-tab-pane>
              <a-tab-pane :key="4" tab="模板列表">
                <div  class="g-flex" style="height: 480px;">
                  <div  class="content-left">
                    <div class="title">模板名称</div>
                    <div class="content">
                      <div
                        v-for="(item,index) in templateDoctorAdviceList"
                        :class="['item',{'currentTemplatePrescriptionclass':currentTemplatePrescriptionIndex===index}]"
                        @click="clickTemplateDoctorAdviceTableData(item.id,index)">
                        {{item.templateName}}
                      </div>
                    </div>
                  </div>
                  <div style="width: 830px;position: relative;">
                    <a-table
                      :pagination="pagination"
                      size="small"
                      :columns="TemplateColumns"
                      :data-source="TemplateTableData"
                      :rowKey="(record,index)=> index"
                      @change="templateHandleTableChange"
                    >
                    </a-table>
                    <a-button
                      type="primary"
                      style="position: absolute;bottom: 5px;right: 0px;"
                      @click="dbClickTemplateDoctorAdviceTableData" >
                      保存模板
                    </a-button>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </a-spin>
        </div>
      </template>
      <a-button icon="plus-circle" type="primary">新增医嘱</a-button>
    </a-popover>
<!--    <a-button type="primary" style="margin-left: 15px;">增加组</a-button>-->
<!--    <a-button type="primary" style="margin-left: 15px;">插入</a-button>-->
<!--    <a-button type="primary" style="margin-left: 15px;">停用</a-button>-->
<!--    <a-button type="primary" style="margin-left: 15px;">取消</a-button>-->
    <a-button type="primary" :disabled="DoctorSituationTableData.length==0" style="margin-left: 15px;" @click="submitDoctorAdvice">保存医嘱</a-button>
    <!--医嘱情况列表-->
    <a-form :form="form" layout="vertical">
      <a-table
        bordered
        :pagination="false"
        style="margin-top: 20px;"
        :scroll="{y:540}"
        size="small"
        :columns="doctorAdviceSituationColumns"
        :data-source="DoctorSituationTableData"
        :rowKey="(record,index)=> index"
      >
        <!---组号-->
        <template slot="groupId" slot-scope="text,record,index">
          <a-input placeholder="请输入数字" :value="text" type="number" @change="e => handleChange(e.target.value, record, 'groupId',index)"/>
<!--     {{record.itemType}}-->
        </template>
        <!---临/长嘱-->
        <template slot="ftype" slot-scope="text,record,index">
          <a-select
            @change="e=>changeSelect(e, 'ftype',index)"
            :value="text"
            style="width: 100%"
            placeholder="请选择"
          >
            <a-select-option v-for="(item,index) in ftypeList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
          </a-select>
        </template>
        <!---首次用量-->
        <template slot="firstDosage" slot-scope="text,record,index">
          <a-input placeholder="请输入" :value="text" type="number" @change="e => handleChange(e.target.value, record, 'firstDosage',index)"/>
        </template>
        <!---每次用量-->
        <template slot="dosage" slot-scope="text,record,index">
          <a-input placeholder="请输入" :value="text" type="number" @change="e => handleChange(e.target.value, record, 'dosage',index)"/>
        </template>
        <!---金额-->
        <template slot="price" slot-scope="text,record,index">
          <a-input placeholder="请输入" :value="text" type="number" @change="e => handleChange(e.target.value, record, 'price',index)"/>
        </template>
        <!---用药频率-->
        <template slot="useTimes" slot-scope="record,text,index">
          <a-form-item >
            <a-select
              @change="e=>changeSelect(e, 'useTimes',index)"
              allow-clear
              style="width: 100%"
              placeholder="请选择"
              v-decorator="[`useTimes${index}`, {rules: [{ required: false, message: '请选择用药频率！' }]}]" >
              <a-select-option v-for="(item,index) in useTimesList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </template>
        <!---用药途径-->
        <template slot="useWays" slot-scope="record,text,index">
          <a-form-item >
            <a-select
              @change="e=>changeSelect(e, 'useWays',index)"
              allow-clear
              style="width: 100%"
              placeholder="请选择"
              v-decorator="[`useWays${index}`, {rules: [{ required: false, message: '请选择用药途径！' }]}]" >
              <a-select-option v-for="(item,index) in useWaysList" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </template>
      </a-table>
    </a-form>

  </div>
</template>

<script>
import { columns } from '@/views/workstation/doctor/columns'
import {
  DoctorOrderList,
  OrderLists,
  getAdviceTemplateLists,
  getDoctorAdviceInfo,
  getDropdownMenuByCode,
  addOrUpdatePrescription,
  saveTheDoctorOrder
} from '@/api/workstation/doctor'
import { dictTypeListForCode } from '@/api/modular/main/customer/customerTriage'
import moment from 'moment'

export default {
  name: 'DoctorAdvice',
  props:{
    row_record:{
      type:Object,
      default:()=>{}
    }
  },
  data(){

    return{
      form: this.$form.createForm(this),
      currentTemplatePrescriptionIndex:0,
      isAwaitDoctorAdviceSituation:false,
      spinning:false,
      commonlyDoctorAdviceTableData:[],
      DoctorAdviceTableData:[],
      DrugsTableData:[],
      TemplateTableData:[],
      //医嘱情况
      doctorAdviceSituationColumns:columns.doctorAdviceSituationColumns,
      commonlyDoctorAdviceTableColumns:columns.commonlyDoctorAdviceTableColumns,
      DoctorAdviceAndDrugsTableColumns:columns.DoctorAdviceAndDrugsTableColumns,
      TemplateColumns:columns.TemplateColumns,
      templateDoctorAdviceList:[],
      currentAdciveActiveKey:1,
      popoverVisibleAdvice:false,
      DoctorSituationTableData:[],
      awaitDoctorAdviceSituationTableData:[],
      productColumns: columns.productColumns,

      pagination: {
        current: 1, //当前页
        pageSize: 10, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '15'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `${total}条 `, //分页中显示总的数据
      },
      ftypeList:[
        {id:'0',name:'临嘱'},
        {id:'1',name:'长嘱'},
      ],
      useWaysList:[],
      useTimesList:[],
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数,
        distinguish:1
      },
      templateQueryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数
        id:''
      },
    }
  },
  mounted() {
    this.getFormInfo()
    this.getDoctorOrderList()
  },
  methods:{
    handleChange(value, record, column,index) {
      this.DoctorSituationTableData[index][column]=value
    },
    /**
     改变用药频率或用药途径
     * */
    changeSelect(value ,column,index) {
      console.log('下拉列表改变', value)
      this.DoctorSituationTableData[index][column]=value
    },
    /**
     切换tabs
     * */
    changeTabsDoctorAdvice(key) {
      this.currentAdciveActiveKey = key
      this.queryParam.distinguish=key
      this.pagination.current= this.queryParam.pageNum=1
      this.pagination.pageSize= this.queryParam.pageSize=10
      this.getOrderLists()
    },
    /**
     * 单击医嘱模板明细
     * **/
    clickTemplateDoctorAdviceTableData(id,index){
      if(this.currentTemplatePrescriptionIndex==index) return
      this.currentTemplatePrescriptionIndex = index ||0
      this.templateQueryParam.id=id
      getAdviceTemplateLists(this.templateQueryParam).then(res=>{
        console.log('医嘱模板明细',res)
        this.TemplateTableData = res.rows
        this.pagination.total= parseInt(res.total)
      })
    },
    /**
     * 双击模板
     * **/
    dbClickTemplateDoctorAdviceTableData(){
      this.getInfoAndConcat( this.templateQueryParam.id)
    },
    /**
     * 控制显示预存款气泡卡片-医嘱情况
     * */
    visibleChangeAdvice(visible){
      this.popoverVisibleAdvice=visible
      if(visible){
        this.getOrderLists()
      }
    },
    /**
     * 执行医嘱
     * */
    executeDoctorAdvice(){
      this.tableData.forEach(item =>{
        if(item.isSubmit){
          this.awaitDoctorAdviceSituationTableData.push(item)
        }
      })
      this.isAwaitDoctorAdviceSituation = true
    },
    /**
     * 医嘱列表
     * */
    getDoctorOrderList(){
      const treatId = this.row_record.treatId
      DoctorOrderList({treatId}).then(res=>{
        console.log('医嘱情况',res)
        this.DoctorSituationTableData = res.rows
      })
    },

    /**
     * 保存模板处方
     * */
    saveTemplatePrescription(){
      this.insertRecipeTableData=this.insertRecipeTableData.concat(this.templatePrescriptionDetailsTableData)
      this.templatePopoverVisible = false
    },
    /**
     * 常用医嘱列表--医嘱列表-药物列表-模板列表
     */
    getOrderLists() {
      this.spinning = true
      const key = this.queryParam.distinguish
      OrderLists(this.queryParam).then(res => {
        this.spinning = false
        console.log('tabs列表', res)
        if (key == 1) {
          this.commonlyDoctorAdviceTableData = res.rows
          this.pagination.total= parseInt(res.total)
          return
        }
        if (key == 2) {
          this.DoctorAdviceTableData = res.rows
          this.pagination.total= parseInt(res.total)
          return
        }
        if (key == 3) {
          this.DrugsTableData = res.rows
          this.pagination.total= parseInt(res.total)
          return
        }
        if (key == 4) {
          this.templateDoctorAdviceList = res.rows
          if(this.templateDoctorAdviceList.length>0){
            this.clickTemplateDoctorAdviceTableData(this.templateDoctorAdviceList[0].id)
          }
        }
      })
    },
    /**
     分页
     * */
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.queryParam.pageNum=pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getOrderLists()
    },
    /**
     分页-模板分页
     * */
    templateHandleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.templateQueryParam.pageNum=pagination.current
      this.templateQueryParam.pageSize = pagination.pageSize
      getAdviceTemplateLists(this.templateQueryParam).then(res=>{
        console.log('医嘱模板明细',res)
        this.TemplateTableData = res.rows
        this.pagination.total= parseInt(res.total)
      })
    },
    /**
     处方表单下拉数据等
     * */
    getFormInfo(){
      //用药途径
      getDropdownMenuByCode({code:'09050001'}).then(res=>{
        // console.log(',用药途径',res)
        if(res.length>0){
          this.useWaysList = res
        }
      })
      //用药频率
      getDropdownMenuByCode({code:'09050002'}).then(res=>{
        // console.log('用药频率',res)
        if(res.length>0){
          this.useTimesList = res
        }
      })
    },
    /**
     * 提交医嘱
     * */
    submitDoctorAdvice(){
      const { form: { validateFields } } = this
      validateFields((errors, values) =>{
        if (errors) {
          console.log('表单检验未通过111',errors,values)
          this.confirmLoading = false
          return
        }

        const params ={
          treatId:this.row_record.treatId,
          theDoctorOrderList:this.DoctorSituationTableData,
        }
        console.log('表单检验通过',params)
        saveTheDoctorOrder(params).then(res=>{
          if(res.code==200){
            this.$message.success(res.message)
            this.getDoctorOrderList()
          }else{
            this.$message.info(res.message)
          }
        })
      })
    },
    getInfoAndConcat(id){
      getDoctorAdviceInfo({
        distinguish:this.currentAdciveActiveKey,
        id:id,
        treatId:this.row_record.treatId
      }).then(res=>{
        // console.log('列表信息',res.rows)
        if(res.code==200){
          this.DoctorSituationTableData= res.rows.concat(this.DoctorSituationTableData)
          this.$message.success('添加成功！')
        }else{
          this.$message.info('查询医嘱信息失败！')
        }
      })
    },
    /**
     表格行点击事件
     * */
    clickRow(record){
      // console.log('record',record)
      return {
        on: {
          dblclick:(e)=>{
           this.getInfoAndConcat(record.id)
          }
        }
      }
    },

  }
}
</script>

<style lang="less" scoped>
.content-left{
  width: 165px;
  //margin-right: 10px;
  padding: 7px;
  border: 1px solid #e8e8e8;

  .title{
    font-weight: bold;
    text-align: center;
    color: #333333;
    border-bottom: 1px #e8e8e8 solid;
    padding-bottom: 5px;
  }
  .item{
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
  }
  .content{
    overflow-y: auto;
    height: 93%;
    .currentTemplatePrescriptionclass{
      color: #3399ff;
    }
  }
}
/deep/ .ant-form-item{
  margin-bottom: 0;
}
/deep/  .ant-table-small.ant-table-bordered .ant-table-content{
  border-right: 0;
}
</style>